<template>
    <div class="review-modal">
        <Modal v-model="modalShow" :footer-hide="true" :width="modalWidth" :mask-closable="true" :closable="true">

            <div slot="header" style="text-align:center">
                <h3>{{modalTitle}}</h3>
            </div>

            <Row>
                <vxe-toolbar export custom></vxe-toolbar>
                <vxe-table
                        border="none "
                        show-overflow
                        resizable
                        export-config
                        :tooltip-config="{theme:'light',enterable:true}"
                        highlight-hover-row
                        height="500"
                        size="medium"
                        align="center"
                        header-align="center"
                        :loading="tableLoading"
                        :sort-config="{trigger: 'cell'}"
                        :data="tableData">
                    <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
                    <vxe-table-column :field="item.key" :title="item.title" min-width="120"
                                      v-for="(item,index) in tableColumn" :key="index">
                    </vxe-table-column>
                </vxe-table>
            </Row>
            <!--<div slot="footer">
                <Button type="error" size="large" long @click="submitOption">关闭</Button>
            </div>-->
        </Modal>
    </div>
</template>

<script>
import {
  getPeopleInfoByTypeList
} from '@/api/statistics'
export default {
  name: 'commonInfoModal',
  props: {
    modalTitle: {
      type: String,
      default: () => {
        return ''
      }
    },
    modalWidth: {
      type: Number,
      default: () => {
        return 600
      }
    },
    tableColumn: {
      type: Array,
      default: () => {
        return []
      }
    },
    type: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data () {
    return {
      modalShow: false,
      btnLoading: false,
      tableLoading: false,
      tableData: [],
      formItem: {}
    }
  },
  methods: {
    modalAction (val) {
      this.modalShow = !this.modalShow
    },
    submitOption () {
      this.$emit('submitOption')
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    getPeopleInfoByType (type) {
      this.tableLoading = true
      getPeopleInfoByTypeList({ type: type }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableLoading = false
          this.tableData = data.data
        } else {
          this.error(data)
        }
      })
    }
  },
  mounted () {
    this.getPeopleInfoByType()
  },
  watch: {
    type (val) {
      this.tableData = []
      this.getPeopleInfoByType(val)
    }
  },
  computed: {}
}
</script>

<style lang="less" scoped>
    /deep/.vxe-loading.is--visible {
        background-color: rgba(0,0,0,.05);
    }
</style>
